<template>
    <div class="detail" style="height: 100%;">
      <div class="detail-top">
              <p class="dt-tip">{{title}} / 设备详情</p>
              <div class="device-name">
                  <p>设备名称：<span>{{detail.deviceName}}</span></p>
                  <div class="btn" @click="detailReturn">
                    <i class="iconfont icon-return"></i>
                      <span>返回</span>
                  </div>
              </div>
              <div class="device-num">
                  <p class="dn-tip">设备编号：<span>Dev-002021063001</span></p>
                  <div class="dt-status">
                      <p>111</p>
                      <span>{{detail.status}}</span>
                  </div>
              </div>
          </div>
          <div class="detail-banner">
                <div class="basic-info">
                    <el-header style="height: 35px;">
                        <span>设备信息</span>
                    </el-header>
                    <div class="detail-info">
                        <p>
                            <span>设备编号：</span>
                            <span>{{detail.deviceNo}}</span>
                        </p>
                        <p>
                            <span>设备名称：</span>
                            <span>{{detail.deviceName}}</span>
                        </p>
                    </div>
                    <div class="detail-info">
                        <p>
                            <span>设备类型：</span>
                            <span>{{detail.deviceType}}</span>
                        </p>
                        <p>
                            <span>ICCID：</span>
                            <span>{{detail.iccid}}</span>
                        </p>
                    </div>
                    <div class="detail-info">
                        <p>
                            <span>电压：</span>
                            <span>{{detail.voltage}}</span>
                        </p>
                        <p>
                            <span>水压：</span>
                            <span>{{detail.waterPressure}}</span>
                        </p>
                    </div>
                    <div class="detail-info">
                        <p>
                            <span>水位：</span>
                            <span>{{detail.waterLevel}}</span>
                        </p>
                        <p>
                            <span>所属组织：</span>
                            <span>{{detail.department}}</span>
                        </p>
                    </div>
                    <div class="detail-info">
                        <p>
                            <span>安装点位：</span>
                            <span>{{detail.installAddr}}</span>
                        </p>
                        <p>
                            <span>责任人：</span>
                            <span>{{detail.safetyDir}}</span>
                        </p>
                    </div>
                    <div class="detail-info">
                        <p>
                            <span>电话：</span>
                            <span>{{detail.dirNum}}</span>
                        </p>
                    </div>
                </div>
          </div>
    </div>
</template>
  
  <script>
  export default {
    props:[
        "detailNum",
        "fmId",
        "fmId2"
    ],
    data(){
        return {
            isShow1:true,
            isShow2:false,
            isShow3:true,
            isShow4:false,
            selectA:false,
            selectB:true,
            detail:{},
            title:'',
            bc:'',
            bcNormal:'background:#1afa29',
            bcAlarm:'background:red',
            bcFault:'background:#ea9518',
            bcDisable:'background:#88147f',
            bcDelay:'background:#f4c988',
            bcOffline:'background:#bfbfbf',
            }
    },
    mounted:function(){
        this.render();
    },
    methods:{
        detailReturn(){
            this.$emit('detailFn',this.isShow1,this.isShow2);
        },
        deviceStatus(){
            this.isShow3=true;
            this.isShow4=false;
        },
        deviceParams(){
            this.isShow4=true;
            this.isShow3=false;
        },
        render(){
            if(this.detailNum==1){
                this.title='消防水监测系统';
                this.$axios({
                    url:`/fireWaters/${this.fmId}`,
                    method:'get'
                }).then((res)=>{
                    console.log(res.data.data);
                    if(res.data.msg=='success'){
                        this.detail={...res.data.data};
                        if(this.detail.status=='正常'){
                            this.bc=this.bcNormal;
                        }else if(this.detail.status=='报警'){
                            this.bc=this.bcAlarm;
                        }else if(this.detail.status=='故障'){
                            this.bc=this.bcFault;
                        }else if(this.detail.status=='禁用'){
                            this.bc=this.bcDisable;
                        }else if(this.detail.status=='延时'){
                            this.bc=this.bcDelay;
                        }else if(this.detail.status=='离线'){
                            this.bc=this.bcOffline;
                        }
                    }else {
                    this.$message.error("数据加载失败！");
                }
                })
            }else{
                this.title='室外消防栓系统';
                this.$axios({
                    url:`/fireHydrants/${this.fmId2}`,
                    method:'get'
                    }).then((res)=>{
                    console.log(res.data.msg);
                    if(res.data.msg=='success'){
                        this.detail={...res.data.data};
                        if(this.detail.status=='正常'){
                            this.bc=this.bcNormal;
                        }else if(this.detail.status=='报警'){
                            this.bc=this.bcAlarm;
                        }else if(this.detail.status=='故障'){
                            this.bc=this.bcFault;
                        }else if(this.detail.status=='禁用'){
                            this.bc=this.bcDisable;
                        }else if(this.detail.status=='延时'){
                            this.bc=this.bcDelay;
                        }else if(this.detail.status=='离线'){
                            this.bc=this.bcOffline;
                        }
                    }else {
                    this.$message.error("数据加载失败！");
                }
                })
            }
        }
    }
  }
  </script>
  
  <style scoped lang="less">
// 详情页面
.detail{
    margin-top: -20px;
    background: #e9eef3;
}
// 详情头部
.detail-top{
    height: 125px;
    background: #fff;
    line-height: 30px;
    padding-left: 20px;
    padding-top: 10px;
    .dt-tip{
        height: 25px;
        line-height: 25px;
        font-size:14px;
        display: flex;
        margin-bottom: 20px;
    }
    .device-name{
        height: 40px;
        display: flex;
        p{
            font-weight: 700;
            margin-right:100px;
        }
        .btn{
            width: 80px;
            height: 30px;
            border: 1px solid #f2f2f2;
            border-radius: 3px;
            line-height: 30px;
            font-size: 12px;
            display: flex;
            justify-content: space-around;
            &:hover{
                cursor: pointer;
                color: #fff;
                background: #1890ff;
                .iconfont{
                color: #fff;
                    }
            }
            .iconfont{
                color: #1890ff;
                
            }
        }
    }
    .device-num{
        height: 40px;
        display: flex;
        .dn-tip{
            font-size: 12px;
            margin-right:100px;
            span{
                font-size: 14px;
            }
        }
        .dt-status{
            width: 80px;
            height: 30px;
            display: flex;
            font-size: 12px;
            justify-content: space-around;
        }
    }
    
}
// 详情主面板
.detail-banner{
    height: calc(100% - 100px);
    background: #fff;
    margin-top: 20px;
    padding-left: 20px;
    padding-top: 10px;
}
.basic-info{
    width: 1000px;
    height: 360px;
    border: 1px solid #d7d7d7;
    .el-header{
        height: 35px;
        line-height: 35px;
        background: #f2f2f2;
        font-size: 16px;
        font-weight: 700;
        display: flex;
        align-items: center;
    }
    .detail-info{
        height: 30px;
        padding-left: 10px;
        font-size: 13px;
        display: flex;
        justify-content: flex-start;
        margin-top: 20px;
        p{
            width:500px;
            display: flex;
            line-height: 30px;
            span{
                margin-left:10px ;
            }
        }
    }
    
}

  </style>